<template>
	<view class="content">

		<swiper class="swiper" circular indicator-dots autoplay :interval="3000">
			<swiper-item class="swiper-item">
				<image src="@/static/banner1.jpg" mode="center"></image>
			</swiper-item>
			<swiper-item class="swiper-item">
				<image src="@/static/banner2.jpg" mode="center"></image>
			</swiper-item>
			<swiper-item class="swiper-item">
				<image src="@/static/banner3.jpg" mode="center"></image>
			</swiper-item>
		</swiper>

		<!-- 预约 -->
		<div class="box">
			<div class="item" @click="goTo(1)">
				<image src="@/static/indexIcon/预约挂号.png" mode=""></image>
				<div class="text">
					预约挂号
				</div>
			</div>
			<div class="item" @click="goTo(2)">
				<image src="@/static/indexIcon/发布帖子.png" mode=""></image>
				<div class="text">
					发布帖子
				</div>
			</div>
		</div>

		<view v-if="isLoading">
			<!-- 文章区域 -->
			<view class="article_list" v-if="postList.data.length > 0">

				<div class="article_box" v-for="(item,index) in postList.data" :key="index">

					<div @click="goDetalis(item)">
						<div class="user_info">
							<div class="avatar">
								<image :src="item.employee?.avatar" mode=""></image>
							</div>
							<div class="name_box">
								<span>{{item.employee.name}}</span>
								<span v-if="item.employee.type == 1">管理员</span>
								<span v-if="item.employee.type == 2">用户</span>
								<span v-if="item.employee.type == 3">医生</span>
							</div>
							<div class="type_box">
								<span class="pre-book already">{{
									item.community.communityName
								}}</span>
							</div>
						</div>
						<!-- 文章内容区域 -->
						<div class="article_content">
							<div class="title">
								{{item.forum.postTitle}}
							</div>
							<div class="content">
								{{item.forum.postContent}}
							</div>
							<!-- 文章图片展示 -->
							<div v-if="item.forum?.coverImg" class="images">
								<image v-for="url in item.forum?.images" :src="url" :key="url" mode=""></image>
							</div>
							<div class="created">

								{{ stringSlicing(item.forum?.createTime || "")}}
							</div>
						</div>

					</div>
					<!-- 展示点赞与评论的区域 -->
					<div class="like_num">
						<div class="item">
							<image src="/static/评论.png" mode=""></image>
							{{item.forum.criticizeNum}}
						</div>
						<div class="item">
							<image @click="likePost(item,true)" v-if="!item.like" src="/static/喜欢.png" mode=""></image>
							<image @click="likePost(item,false)" v-else src="/static/喜欢2.png" mode=""></image>
							{{item.forum.likeNum}}
						</div>
					</div>
				</div>
				<up-loadmore v-if="isGlide" :status="glideStatus" />
			</view>
			<view v-else>
				<up-empty mode="list">
				</up-empty>
			</view>


		</view>
		<view v-else>
			<up-loadmore status="loading" />
		</view>

	</view>
</template>

<script setup>
	import {
		apiGetForumList,
		apiDropLike
	} from "@/api/forum.js"
	import {
		onReachBottom,
		onPullDownRefresh,
		onShow
	} from '@dcloudio/uni-app'
	import {
		ref,
		onMounted,
		reactive
	} from "vue";

	const hello = ref("首页")
	const glideStatus = ref("loading")
	const isGlide = ref(true)
	const userInfo = ref({})
	const isLoading = ref(false)
	const queryData = reactive({
		postStatus: 2,
		userId: null,
		page: 1,
		pageSize: 10,
	})


	//帖子列表
	const postList = reactive({
		data: []
	})


	const stringSlicing = (str) => {
		return str.split('T')[0] + ' ' + str.split('T')[1]
	}

	const likePost = async (item, type) => {
		item.like = type
		if (type) {
			// 点赞
			item.forum.likeNum++;
		} else {
			//取消点赞
			item.forum.likeNum--;
		}
		await apiDropLike({
			isLike: type,
			postId: item.forum.postId,
			userId: userInfo.value.empId,
			Type: 1,
		})

	}

	const goDetalis = (item) => {
		// 去往详情页面
		uni.navigateTo({
			url: `/pages/articleDetails/articleDetails?postId=${item.forum.postId}&isLike=${item.like}`
		})
	}
	const goTo = (type) => {
		console.log(type);
		if (type == 1) {
			//去往挂号页面
			uni.navigateTo({
				url: "/pages/register/register"
			})
		} else {
			uni.navigateTo({
				url: "/pages/forum/forum"
			})
		}
	}


	onPullDownRefresh(() => {
		queryData.page = 1
		queryData.pageSize = 10
		getForumList()
		setTimeout(function() {
			uni.stopPullDownRefresh();
			uni.showToast({
				icon: "success",
				title: "刷新成功",
				duration: 1000
			})
		}, 1000);
	})


	onReachBottom(async () => {
		glideStatus.value = 'loading'
		isGlide.value = true
		queryData.page++;
		try {
			let res = await apiGetForumList(queryData)

			if (res.data.records.length > 0) {
				postList.data = [...postList.data, ...res.data.records]
			} else {
				queryData.page--;
				setTimeout(() => {
					glideStatus.value = 'nomore'
				}, 1000)
			}
		} catch (e) {
			//TODO handle the exception
			uni.showToast({
				title: '请求失败',
				icon: "error",
				duration: 1000
			});
		}

	})

	//获取帖子列表
	const getForumList = async () => {

		try {
			let res = await apiGetForumList(queryData)
			postList.data = res.data.records
			postList.data.forEach(ele => {
				if(	ele.forum.images.length != 0){
					ele.forum.images = JSON.parse(ele.forum.images)
				}
			})
		
		} catch (e) {
			//TODO handle the exception
			uni.showToast({
				title: '请求失败',
				icon: "error",
				duration: 1000
			});
		}
	}

	onShow(async () => {
		let user = await uni.getStorage({
			key: "empleyeeInfo"
		})
		userInfo.value = user.data
		queryData.userId = user.data.empId
		getForumList()
		setTimeout(() => {
			isLoading.value = true
		}, 1000)
	})


	onMounted(async () => {
		let user = await uni.getStorage({
			key: "empleyeeInfo"
		})
		userInfo.value = user.data
		queryData.userId = user.data.empId
		getForumList()
		setTimeout(() => {
			isLoading.value = true
		}, 1000)
	})
</script>

<style scoped lang="scss">
	.content {
		width: 100vw;
		height: 100%;
		background-color: #eee;
		box-sizing: border-box;
		padding-bottom: 60rpx;
		box-sizing: border-box;

		.article_list {
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;

			.article_box {
				// height: 400rpx;
				background-color: #fff;
				border-radius: 20rpx;
				padding: 20rpx;
				box-sizing: box-sizing;
				margin: 20rpx auto;

				.like_num {
					margin-top: 20rpx;
					width: 100%;
					height: 100rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.item {
						width: 50%;
						display: flex;
						justify-content: center;
						align-items: center;

						image {
							width: 50rpx;
							height: 50rpx;
							margin-right: 20rpx;
						}
					}
				}

				.images {
					width: 100%;
					display: flex;
					flex-wrap: wrap;

					image {
						width: 24%;
						margin: 10px 12px 0 0;
						height: 100px;
						border-radius: 8px;

					}

				}

				.article_content {
					width: 100%;

					.created {
						margin-top: 10rpx;
						color: #999;
					}

					.title {
						font-size: 42rpx;
						width: 100%;
						height: 100%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						margin-bottom: 20rpx;
					}

					.content {
						width: 100%;
						background-color: #fff;
						height: 100%;
						max-height: 120rpx;
						word-wrap: break-word;
						word-break: break-all;
						font-size: 30rpx;
						-webkit-line-clamp: 3;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						text-overflow: ellipsis;
						overflow: hidden;
					}
				}

				.user_info {
					width: 100%;
					height: 120rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					box-sizing: border-box;

					.name_box {
						display: flex;
						flex: 1;
						justify-content: flex-start;
						padding-left: 20rpx;
						box-sizing: border-box;
						flex-direction: column;

						label:nth-child(1) {
							font-size: 30rpx;
						}
					}

					.pre-book {
						display: flex;
						justify-content: center;
						align-items: center;
						padding: 16rpx 30rpx;
						box-sizing: border-box;
						// width: 150rpx;
						// height: 60rpx;
						border-radius: 40rpx;
						color: #fff;
					}

					.already {
						background-color: #e87f06;
					}

					image {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
					}
				}
			}
		}


		.swiper {
			// padding: 20rpx 0;
			background: #fff;
			height: 400rpx;
			// margin-bottom: 20rpx;

			.swiper-item {
				width: 100%;

				// height: 600rpx;
				image {
					width: 100%;
					height: 100%;
					// object-fit:cover;
				}
			}

		}
	}

	.box {
		width: 100vw;
		// height: 120rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		padding: 20rpx 20rpx;
		box-sizing: border-box;

		.item {
			width: 48%;
			height: 100rpx;
			border-radius: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 60rpx;
				height: 60rpx;
				margin-right: 20rpx;
			}

			.text {
				font-size: 36rpx;
				color: #fff;
			}
		}

		.item:nth-child(1) {
			background-color: #a9ddd9;
		}

		.item:nth-child(2) {
			background-color: #6fd96c;
		}
	}
</style>
